<template>
  <div class="rule-group-add">
    <div class="breadcrumb ">
      <Breadcrumb>
        <BreadcrumbItem to="/payroll/salary/rule">返回</BreadcrumbItem>
        <BreadcrumbItem to="/payroll/salary/rule/allowance">津补贴方案 /</BreadcrumbItem>
        <BreadcrumbItem>新增津补贴方案</BreadcrumbItem>
      </Breadcrumb>
    </div>

    <div class="step-section ">
      <div class="section">
        <div class="s-header flex">
          <h3>方案名称</h3>
        </div>
        <div class="section-content">
          <div class="content-desc">设置方案的适用公司及模板</div>
          <div class="content-detail">
            <Form label :label-width="0">
              <div class="form-item-row form-item-row2">
                <p class="top-tip">如：上海分部产品部门津补贴方案</p>
                <FormItem label class="form-item">
                  <Input v-model="formItem.input" placeholder="请输入" class="form-input"></Input>
                </FormItem>
              </div>
            </Form>
          </div>
        </div>
      </div>

      <div class="section">
        <div class="s-header flex">
          <h3>津补贴规则</h3>
        </div>
        <div class="section-content">
          <div class="content-desc">设置本方案内的津补贴发放。同一方案内可设置多个津补贴项目的发放规则。可设置的津补贴项目与企业的薪酬结构中启用的项目一致。</div>
          <div class="content-detail">
            <div class="rule-wrap">
              <div class="rule-head">
                <div class="h-left">
                  <span class="mr24">交通补贴</span>
                  <Select class="form-input">
                    <Option value="beijing ">按月固定金额补贴</Option>
                    <Option value="beijing ">按月固定金额补贴</Option>
                  </Select>
                  <Tooltip placement="top">
                    <Icon type="ios-help-circle" size="18" class="ml4" />
                    <div slot="content" class="tooltip-custom">
                      <p>每月固定补贴金额,即不考虑考勤情况，设置该补贴每月固定金额。</p>
                      <br />
                      <p>比如通讯补贴每月固定为200元/月</p>
                    </div>
                  </Tooltip>
                </div>
                <div class="h-right">
                  <Icon type="ios-trash-outline" size="24" />
                </div>
              </div>
              <div class="rule-content">
                <div class="h-left">
                  <span class="mr24">补贴规则</span>
                  <Input v-model="formItem.name" placeholder="请输入" class="form-input"></Input>小时/天
                  <Checkbox class="ml12">根据实际计薪天数折算</Checkbox>
                  <Tooltip placement="top">
                    <Icon type="ios-help-circle" size="18" class="ml4" />
                    <div slot="content" class="tooltip-custom">
                      <p>每月固定补贴金额,即不考虑考勤情况，设置该补贴每月固定金额。</p>
                      <br />
                      <p>比如通讯补贴每月固定为200元/月</p>
                    </div>
                  </Tooltip>
                </div>
              </div>
            </div>
            <div class="rule-wrap">
              <div class="rule-head">
                <div class="h-left">
                  <span class="mr24">餐补&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                  <Select class="form-input">
                    <Option value="beijing ">按月固定金额补贴</Option>
                    <Option value="beijing ">按月固定金额补贴</Option>
                  </Select>
                  <Tooltip placement="top">
                    <Icon type="ios-help-circle" size="18" class="ml4" />
                    <div slot="content" class="tooltip-custom">
                      <p>每月固定补贴金额,即不考虑考勤情况，设置该补贴每月固定金额。</p>
                      <br />
                      <p>比如通讯补贴每月固定为200元/月</p>
                    </div>
                  </Tooltip>
                </div>
                <div class="h-right">
                  <Icon type="ios-trash-outline" size="24" />
                </div>
              </div>
              <div class="rule-content">
                <div class="h-left">
                  <span class="mr24">补贴规则</span>
                  <Input v-model="formItem.name" placeholder="请输入" class="form-input"></Input>小时/天
                  <Checkbox class="ml12">根据实际计薪天数折算</Checkbox>
                  <Tooltip placement="top">
                    <Icon type="ios-help-circle" size="18" class="ml4" />
                    <div slot="content" class="tooltip-custom">
                      <p>每月固定补贴金额,即不考虑考勤情况，设置该补贴每月固定金额。</p>
                      <br />
                      <p>比如通讯补贴每月固定为200元/月</p>
                    </div>
                  </Tooltip>
                </div>
              </div>
            </div>
            <div class="f-btn">
              <Button class="pierced-nobg border-dashed" @click="add">+ 添加津补贴项目</Button>
            </div>
          </div>
        </div>
      </div>

      <div class="section">
        <div class="s-header flex">
          <h3>扣发规则</h3>
        </div>
        <div class="section-content">
          <div class="content-desc">设置后，满足条件的员工将不享受对应的津补贴</div>
          <div class="content-detail">
            <Form label :label-width="0">
              <div class="form-item-row form-item-row2">
                <ul class="checkbox-list flex-box">
                  <li class="checkbox-item mr24" v-for="(item, index) in checkboxList" :key="index">
                    <Checkbox>{{item.name}}</Checkbox>
                  </li>
                </ul>
              </div>
            </Form>
          </div>
        </div>
      </div>

      <div class="section">
        <div class="s-header flex">
          <h3>方案备注</h3>
        </div>
        <div class="section-content">
          <div class="content-desc">加一些方案说明，以便下次查看时，很清楚当时的津补贴规则</div>
          <div class="content-detail">
            <Form label="考勤计薪方案" :label-width="0">
              <div class="form-item-row form-item-row2">
                <FormItem label class="form-item">
                  <Input
                    v-model="formItem.input"
                    placeholder="请输入"
                    type="textarea"
                    class="form-input"
                  ></Input>
                </FormItem>
              </div>
            </Form>
          </div>
        </div>
      </div>
      <div class="section">
        <Button class="save-btn-green mt32">保存</Button>
      </div>

      <!-- modal -->
      <Modal v-model="modal2">
        <p slot="header" style="font-weight:bold;">选择津补贴项目</p>
        <div class="m-c-content">
          <p>可选择以下多个津补贴项目，设置相关规则</p>
           <Form label="津补贴项目" :label-width="120" class="mt12">
              <div class="form-item-row">
                <FormItem label="津补贴项目" class="form-item">
                  <ul class="fake-checkbox flex-box">
                <li class="fake-c-item active ">交通补贴</li>
                <li class="fake-c-item ">餐补</li>
              </ul>
                </FormItem>
              </div>
              <div class="form-item-row">
               
              </div>
            </Form>
        </div>
        <div slot="footer">
          <div class="m-c-footer flex">
            <div class="m-c-left">
              <span>没有找到想要的项目？ </span>
              <span class="ml12"><a href="">去添加项目</a></span>
            </div>
            <div class="m-c-right">
              <Button @click="cancel">取消</Button>
              <Button class="save-btn-green" @click="confirm">确认</Button>
            </div>
          </div>
        </div>
      </Modal>
      <!-- modal -->
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      current: 0,
      formItem: {
        input: ""
      },
      modal2: false,

      checkboxList: [
        {
          name: "当月离职"
        },
        {
          name: "试用期"
        },
        {
          name: "实习员工"
        },
        {
          name: "兼职员工"
        },
        {
          name: "劳务派遣员工"
        },
        {
          name: "劳务外包员工"
        },

        {
          name: "退休返聘员工"
        }
      ]
    };
  },
  methods: {
    next() {
      if (this.current == 2) {
        this.current = 0;
      } else {
        this.current += 1;
      }
    },
    prev() {
      if (this.current == 0) {
        this.current = 0;
      } else {
        this.current -= 1;
      }
    },
    add() {
      this.modal2 = true;
    },
    cancel(){
      this.modal2 = false;
    },
    confirm(){
      this.modal2 = false;
    }
  }
};
</script>
<style lang="scss" scoped src='../../index.scss'>
</style>